<template>
  <div>
    <header-el-menu :category-list="this.categoryList"></header-el-menu>
    <div class="detailMain">
      <div class="right">
        <my-index-usershow :usershow = this.usershow></my-index-usershow>
        <my-contact></my-contact>
      </div>
      <div class="left">
        <el-breadcrumb class="myBreadcrumb" separator="/" >
          <el-breadcrumb-item :to="{ path: '/blogList'}" >首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,id) in breadcrumb" :key="id" :to="{ path: '/blogList',query:{categoryId: item.categoryId}}" >{{item.categoryName}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="blogContain">
          <h2 style="margin-bottom: 5px;font-size: 40px; font-weight: 200; ">{{blog.title}}</h2>
          <div class="detail">
            <div class="time">{{ blog.time }} &nbsp author:{{blog.author}}</div>
            <div class="category">
              <el-link type="danger" :underline="false" @click="gotoBlogList">{{ blog.category }}</el-link>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="markdown-body editormd-html-preview" style="padding: 0px;margin-top: 15px;" v-html="blog.text">
          </div>
          <el-divider></el-divider>
          <comment style="margin: 20px 0px 0px 0px" :blog-id="parseInt(this.queryParams.blogId)"></comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerElMenu from "./components/content/header/headerElMenu";
import myIndexUsershow from "./components/content/main/myIndexUsershow";
import myDetailNewshow from "./components/content/blogdetail/myDetailNewshow";
import { oneBlogFromIndex} from "@/api/blog/blog";
import {getCategoryNameById, getParentById} from "./utils/getCategoryNameById.js";
import {listCategoryFromIndex} from "@/api/blog/category";
import comment from "../components/comment";
import myContact from "./components/content/contact/myContact";
//获得博客配置
import {listConfigByType } from "@/api/blog/config";
import {getUserConfig} from "./utils/getBlogConfig";
import MyContact from "./components/content/contact/myContact";

export default {
  name: "oneBlogDetail",
  components: {
    MyContact,
    headerElMenu,myIndexUsershow,myDetailNewshow,comment
  },
  data() {
    return {
      breadcrumb: [],
      blog: {
          title: "",
          time: "",
          author: "",
          category: "",
          categoryId: "",
          text: ""
      },
      queryParams: {
        blogId: null,
      },
      categoryList: null,
      usershow: null,
    }
  },
  created() {
    listConfigByType(1).then(response =>{
      this.usershow = getUserConfig(response.rows);
    });
    this.queryParams.blogId = this.$route.params.blogId;
    oneBlogFromIndex(this.queryParams).then(response => {
      this.blog.title = response.data.blog.title;
      this.blog.time = response.data.blog.updateTime;
      this.blog.author = response.data.blog.createBy;
      this.blog.categoryId = response.data.blog.categoryId;
      this.blog.text = response.data.content.content;
      listCategoryFromIndex().then(response => {
        this.categoryList = response.rows;
        this.blog.category = getCategoryNameById(this.blog.categoryId,this.categoryList);
        this.breadcrumb = getParentById(this.blog.categoryId,this.categoryList);
      })
    })
  },
  methods:{
    gotoBlogList(){
        this.$router.push({ path: "/blogList", query: { categoryId: this.blog.categoryId}});
    }
  }
}
</script>

<style scoped>
.el-container {
  margin: auto;
  max-width: 1600px;
  min-width: 1000px;
}
.detailMain{
  display: flex;
}
.left{
  height: auto;
  width: 70%;
}
.right{
  height: auto;
  width: 30%;
  margin-top: 10px;
}
.myBreadcrumb{
  margin: 10px 10px 10px 10px;
}
.detail{
  display: flex;
  flex-direction: row;
  font-size: 13px;
}
.time{
  margin-top: 1px;
  font-size: 14px;
  color: #999;
}
.category{
  margin-left: 10px;
  margin-top: auto;
  margin-bottom: auto;
}
.blogContain{
  margin: 0px 10px 0px 10px;
}
</style>
